<template>
	<n-tabs v-model:value="tabsSelect" class="tabs-box h100" size="small" type="segment">
		<!-- 组只有基础配置 -->
		<n-tab-pane name="Basics" size="small" display-directive="show:lazy" class="h100 overflow-y-auto overflow-x-hidden">
			<template #tab>
				<n-space size="small">
					<span>基础</span>
					<n-icon size="16" class="icon-position" component="Eleme" />
				</n-space>
			</template>
			<BasicsSetting />
		</n-tab-pane>
		<!-- 组件自定义配置 -->
		<n-tab-pane
			name="chartSetting"
			size="small"
			display-directive="show:lazy"
			class="h100 overflow-y-auto overflow-x-hidden"
			v-if="$slots.default"
		>
			<template #tab>
				<n-space size="small">
					<span>定制</span>
					<n-icon size="16" class="icon-position" component="Construct" />
				</n-space>
			</template>
			<slot></slot>
		</n-tab-pane>
		<!-- 组件数据 -->
		<n-tab-pane
			name="dataSetting"
			size="small"
			display-directive="show:lazy"
			class="h100 overflow-y-auto overflow-x-hidden"
			v-if="$slots.data"
		>
			<template #tab>
				<n-space size="small">
					<span>数据</span>
					<n-icon size="16" class="icon-position" component="Flash" />
				</n-space>
			</template>
			<slot name="data">
				<BasicsData />
			</slot>
		</n-tab-pane>
		<!-- 组件逻辑 -->
		<n-tab-pane
			name="eventSetting"
			size="small"
			display-directive="show:lazy"
			class="h100 overflow-y-auto overflow-x-hidden"
			v-if="$slots.event"
		>
			<template #tab>
				<n-space size="small">
					<span>事件</span>
					<n-icon size="16" class="icon-position" component="Rocket" />
				</n-space>
			</template>
			<slot name="event">
				<BasicsEvent />
			</slot>
		</n-tab-pane>
	</n-tabs>
</template>

<script setup name="BasicsConfig">
const tabsSelect = ref('Basics');
</script>
